<template>
  <div class="c-bg-sgray c-p">
    <div>
      <new-search-bar searchFixed="true" bgSearch="c-bg-white c-pv24-i" @search="startSearch" @cancel="startSearch" :searchText="searchText"></new-search-bar>
      <div class="c-bg-white" v-for="(item,index) in examinationList" :key="index" @click="clickExaminationItem(item.libraryId)">
        <div class="c-mh24 c-pv24 c-bg-white c-flex-row c-bd-b1">
          <div class="c-ww180 c-hh120 c-br16 c-text-hidden c-p">
            <vip-status :item="item"></vip-status>
            <CoverImg coverSizeClass="c-w100 c-h c-text-hidden c-br16" imgClass="c-br16" :coverUrl="$addXossFilter(item.avatar, require('@/assets/examination_defult.png'))" />
          </div>
          <div class="c-w0 c-flex-grow1 c-flex-column c-justify-sb c-pl20">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{item.name}}</div>
            <div>
              <div class="c-fs22 c-fc-gray c-text-ellipsis1">{{item.description}}</div>
              <div class="c-flex-row c-aligni-center c-justify-sb c-mt10">
                <div class="c-fc-xmlred c-fw600 c-flex-row c-aligni-center">
                  <div class="c-fs20" v-if="item.payType == 2">{{'￥' | iosPriceFilter}}</div>
                  <div :class="Number(item.price) ? 'c-fs26' : 'c-fs22'">{{item.payType | priceValueFilter(item.price, 129, item.optimal, 'index')}}</div>
                </div>
                <div class="c-fs20 c-fc-gray c-lh ">练习 | 内含{{item.questionNum}}题</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <loading-status-tem :dataStatus="dataStatus" noDataText="暂无内容"></loading-status-tem>
      <template v-if="companyAuth && companyAuth.companyNav">
        <nav-bottom-bar :itemIndex="42" v-for="(item,index) in companyAuth.companyNav" :key="index" v-if="item.navType == 42"></nav-bottom-bar>
      </template>
    </div>
  </div>
</template>
<script>
import NavBottomBar from "@/components/templates/common/navBottomBar.vue";
import newSearchBar from "@/components/templates/common/newSearchBar.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
import vipStatus from '@/components/templates/common/vipStatus.vue';
import CoverImg from '@/components/templates/common/coverImg.vue';
import { utilJs } from "@/utils/common.js";
const LIMIT = 20;
let page = 1;
// let searchText; //搜索输入框
export default {
  name: "ClassList",
  components: {
    loadingStatusTem,
    newSearchBar,
    vipStatus,
    NavBottomBar,
    CoverImg
  },
  props: [],
  data() {
    return {
      theme: localStorage.getItem("colorName")
        ? localStorage.getItem("colorName")
        : "mb5_default",
      dataStatus: 'HAS_MORE_DATA',
      examinationList: [],
      last_page: 0,
      searchText: "",
      companyAuth: JSON.parse(localStorage.getItem("companyAuth")),
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    //通过考试称模糊搜索专栏
    startSearch: function (e) {
      page = 1;
      this.examinationList = [];
      utilJs.toPageScrollTop();
      this.searchText = e.searchValue;
      this.getExaminationList();
    },
    getExaminationList() {
      if (this.dataStatus == 'LOADING') {
        return;
      }
      this.dataStatus = 'LOADING';
      // &limit=${LIMIT}
      utilJs.getMethod(`${global.apiurl}itemBank/itemBankList?page=${page}&limit=${LIMIT}&searchName=${this.searchText}`,
        res => {
          if (page == 1) {
            this.examinationList = res.data;
          } else {
            this.examinationList = [...this.examinationList, ...res.data];
          }
          if (res.data && res.data.length < LIMIT) {
            this.dataStatus = page == 1 && res.data.length == 0 ? 'NO_DATA' : 'NO_MORE_DATA';
          } else {
            this.dataStatus = 'HAS_MORE_DATA';
            page++;
          }
        },
        failRes => {
          this.dataStatus = 'DATA_ERROR';
        }
      );
    },
    clickExaminationItem(libraryId) {
      this.$routerGo(this, "push", {
        path: "/homePage/itemBank/questionSaleDetail?",
        query: {
          libraryId: libraryId
        }
      });
    },
    //分享
    wechatShare: function () {
      let title = "练习列表"; //window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId")
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
    windowScrollFunction() {
      utilJs.handleLoading(() => {
        if (this.dataStatus == 'HAS_MORE_DATA' && this.examinationList.length > 0) {
          this.getExaminationList();
        }
      });
    },
    initData() {
      page = 1;
      this.dataStatus = 'HAS_MORE_DATA';
      this.examinationList = [];
      this.searchText = "";
      this.getExaminationList();
    },
  },
  activated() {
    setDocumentTitle("练习列表");// eslint-disable-line
    if (utilJs.checkNeedInitData(this.examinationList, page)) {
      // this.getMore();
      this.initData()
    }
    // this.initData();
    this.wechatShare();
    window.addEventListener('scroll', this.windowScrollFunction);
  },
  deactivated() {
    // this.dataStatus = 'NO_MORE_DATA';
    window.removeEventListener('scroll', this.windowScrollFunction);
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>


